<!-- 充值余额 -->
<template>
	<view class="container">
		<image class="icon" src="../../../static/images/center/yue.png" mode=""></image>
		<view class="nowMoney">
			<text class="count">￥</text>
			<text class="count">{{count}}</text>
		</view>
		<text class="title">我的余额</text>
		<view class="cell">
			<text :animation="animationData1">充值金额</text>
			<text>￥</text>
			<input class="input" type="digit" placeholder="请输入充值金额" placeholder-style="font-weight:normal;font-size: 32rpx;"
			 v-model="cash" />
		</view>
		<button class="btn recharge" type="default" @tap="rechargeStatus">充值</button>
		<!-- app选择支付方式 -->
		<choosePay ref="choosePay" @confirm="confirm"></choosePay>
	</view>
</template>

<script>
	import {
		rechargeRoutine
	} from '@/api/pay.js'
	import wechat from '@/common/wechat.js'
	import choosePay from '@/components/choosePay/choosePay.vue'
	export default {
		components: {
			choosePay
		},
		data() {
			return {
				payType: "weixin",
				provider: "wxpay",
				count: 0,
				cash: null,
				act: false,
				animationData1: {},
			}
		},
		onShow() {
			this.count = uni.getStorageSync('userInfo').now_money
			var animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'ease',
			})
			this.animation = animation
		},
		watch: {
			cash: {
				deep: true,
				handler(val, oldval) {
					this.blur();
				}
			}
		},
		methods: {
			blur() {
				if (this.cash) {
					this.act = true
				} else {
					this.act = false
				}
				if (this.cash) {
					this.animation.opacity(1).step()
					this.animationData1 = this.animation.export()
				} else {
					this.animation.opacity(0).step()
					this.animationData1 = this.animation.export()
				}
			},
			rechargeStatus() {
				//#ifndef APP-PLUS
				this.recharge()
				//#endif
				//#ifdef APP-PLUS
				this.$refs.choosePay.show()
				//#endif
			},
			confirm(e) {
				this.payType = e.payType
				this.provider = e.provider
				this.recharge()
			},
			recharge() {
				if (!this.cash || this.cash == 0) {
					return uni.showToast({
						icon: "none",
						title: "请输入充值金额"
					})
				}
				uni.showLoading({mask:true})
				rechargeRoutine({
					pay_type: this.payType,
					price: this.cash,
					type: 0, // 0 现金充值余额  1佣金转换余额  2充值贝壳
					// #ifdef MP-WEIXIN
					from: 'routine',
					// #endif
					// #ifdef APP-PLUS
					from: 'app',
					// #endif
					// #ifdef H5
					from: 'weixin',
					// #endif
				}).then(res => {
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: '余额充值',
						timeStamp: res.data.timestamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: (e) => {
							uni.navigateTo({
								url: "./rechargeSuccess?num=" + this.cash
							})
						},
						fail: (e) => {
							this.$api.msg('支付失败！')
						}
					})
					// #endif
					// #ifdef APP-PLUS
					uni.requestPayment({
						provider: this.provider,
						orderInfo: res.data,
						success: (e) => {
							uni.navigateTo({
								url: "./rechargeSuccess?num=" + this.cash
							})
						},
						fail: (e) => {
							console.log(e)
						}
					})
					// #endif
					//#ifdef H5
					// h5支付
					let url = "/pages/center/balance/rechargeSuccess?num=" + this.cash
					wechat.pay(res.data, url, false)
					//#endif
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 150rpx;
		text-align: center;

		.icon {
			display: block;
			margin: 0 auto;
			width: 150rpx;
			height: 150rpx;
			border-radius: 100rpx;
			background-color: $theme-color;
		}

		.nowMoney {
			color: rgba(51, 51, 51, 1);
			margin-top: 40rpx;

			text:nth-of-type(1) {
				font-size: 30rpx;
				font-weight: bold;
			}

			text:nth-of-type(2) {
				font-size: 50rpx;
				font-weight: bold;
			}
		}

		.title {
			margin-top: 26rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.cell {
			width: 600rpx;
			height: 50rpx;
			border-bottom: 1rpx solid rgba(220, 220, 220, 1);
			margin-left: 75rpx;
			margin-top: 150rpx;
			padding: 14rpx 0;
			position: relative;
			text-align: left;

			text:nth-of-type(1) {
				position: absolute;
				opacity: 0;
				top: -30rpx;
				font-size: 28rpx;
				color: rgba(153, 153, 153, 1);
			}

			text:nth-of-type(2) {
				position: absolute;
				bottom: 20rpx;
				left: 0;
				font-size: 28rpx;
				font-weight: bold;
			}

			.input {
				padding-left: 30rpx;
				font-size: 40rpx;
				font-weight: bold;
			}
		}

		.btn {
			border: none;
			width: 600rpx;
			height: 80rpx;
			background: $theme-color;
			border-radius: 40rpx;
			color: #fff;
			line-height: 80rpx;
			font-size: 32rpx;
			font-weight: bold;
			letter-spacing: 10rpx;
			position: fixed;
			left: 75rpx;
		}

		.recharge {
			bottom: 60rpx,
		}
	}
</style>
